<script setup>
import { provide } from 'vue';
import FunctionSelector from './components/FunctionSelector.vue';
import FileUploadArea from './components/FileUploadArea.vue';
import ActionButtons from './components/ActionButtons.vue';
import ResultPreview from './components/ResultPreview.vue';
import { useFileProcessor } from './components/useFileProcessor';
import { useFileStore } from '@/store/fileStore';

// 提供文件存储给所有子组件
const fileStore = useFileStore();

provide('fileStore', fileStore);

const { processing, processed, previewData, handleProcess, handleDownload } = useFileProcessor();

const availableFunctions = [
  // { label: '水表普查数据提取', value: 'format_survey_files' },
  // { label: '抽查普表清单', value: 'sample_meter_list' },
  { label: '通过水表表号导入水量', value: 'upload_meter' },
  { label: '同步备注（按表头）', value: 'sync_remarks' },
  { label: '按表头细分数据', value: 'split_by_header' },
  { label: '相同数据筛选', value: 'filter_common_values' },
  { label: '表头对比（前表中过滤后表指定数据）', value: 'compare' },
  { label: '数据一致性对比（输出数据不一致的行）', value: 'compare_header_consistency' },
  { label: '表格数据格式化', value: 'format_survey_enhanced' },
  { label: '根据表头拆分数据', value: 'split_by_header_enhanced' },
  { label: '通用数据抽样', value: 'sample_data' },
  { label: '预算计算', value: 'budget_calculation' },
  { label: '合并Excel文件', value: 'merge_excel_files' }
];

const handleClearFiles = () => {
  processed.value = false;
  previewData.value = null;
};
</script>

<template>
  <div class="app-container">
    <div class="header">
      <h1>Excel 多功能处理工具</h1>
      <p class="subtitle">快速处理Excel文件，提高工作效率</p>
    </div>

    <FunctionSelector @functionChange="handleClearFiles" :availableFunctions="availableFunctions" />

    <FileUploadArea @clearFiles="handleClearFiles" />

    <ActionButtons
      :processing="processing"
      :processed="processed"
      @process="handleProcess"
      @download="handleDownload"
    />

    <ResultPreview v-if="processed" :previewData="previewData" />
  </div>
</template>

<style scoped>
.app-container {
  padding: 20px 50px;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 30px;
  padding-top: 20px;
}

.header h1 {
  color: #303133;
  margin-bottom: 10px;
  font-size: 32px;
  font-weight: 700;
  background: linear-gradient(135deg, #409eff, #67c23a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header .subtitle {
  color: #909399;
  font-size: 16px;
  letter-spacing: 1px;
}

@media (max-width: 768px) {
  .app-container {
    padding: 15px;
  }

  .header h1 {
    font-size: 26px;
  }
}
</style>
